<template>
  <h3>computed用法</h3>
  <div>
    <el-button>{{ count }} --- {{ doubleNum }}</el-button>
    <el-button @click="count++">点击增加count</el-button>
    <el-button @click="emit('widthChange', width)">{{ width }}</el-button>
  </div>
</template>
<script setup lang="tsx">
import { ref, computed } from "vue";
const props = defineProps({
    id: {
        type: Number,
        default: null
    }
});
console.log(props.id)
const emit = defineEmits(['widthChange']);

const count = ref(0);
const doubleNum = computed(() => {
  return count.value * 2;
});

const innerWidth = ref(window.innerWidth);
const width = computed(() => {
  const minWidth = "200px";
  const min = parseInt(minWidth.replace(/px/g, ""));
  if ((innerWidth.value - 200) * 0.9 <= min) {
    return minWidth;
  }
  return ((innerWidth.value - 200) * 0.9).toFixed(2) + "px";
});

window.addEventListener("resize", () => {
  innerWidth.value = window.innerWidth;
});
</script>
